<template>
  <div class="wrap">
    <h3>
      <span>地址管理</span>
      <router-link to="/addaddress">
        <button v-show="show" class="btn">添加新地址</button>
      </router-link>
    </h3>
    <div v-show="show">
      <ul v-show="bol">
        <li>
          <span>收货人</span>
          <span>所在区域</span>
          <span>街道地址</span>
          <span>联系电话</span>
          <span>备注</span>
          <span>操作</span>
        </li>
        <li v-for="(item,index) in arr">
          <span>{{item.name}}</span>
          <span>{{item.region}}</span>
          <span>{{item.street}}</span>
          <span>{{item.phone}}</span>
          <span>{{item.comments}}</span>
          <span>
          <button class="btn1" v-if="btn==0?true:false">设为默认地址</button>
          <button class="btn2">修改</button>
          <button class="btn3" @click="del(index)">删除</button>
        </span>
        </li>
      </ul>
      <div class="empty" v-show="bol1">
        <img src="../../../static/zwf/mine/addr.png"/>
        <span>暂无收货地址,请点击</span>
        <router-link to="/addaddress">
          <button class="btn4">添加新地址</button>
        </router-link>
      </div>
    </div>
    <p class="pp" v-show="show1">暂无数据,请登录</p>


  </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "Address",
      data(){
          return{
            bol:'true',
            bol1:'false',
            arr:[],
            show:true,
            show1:false,
            btn:1
          }
      },
      methods:{
        del(i){
          var txt= confirm("是否删除地址");
          if(txt==true){
            var params=new URLSearchParams();
            params.append('addid',this.arr[i].address_id);
            axios.post('/api/firday/address/del.php',params).then(res=>{
              alert(res.data);
              this.$router.go(0);
            })
          }else{
            
          }

        }
      },
      mounted(){
        var params=new URLSearchParams();
        params.append('iphone',this.$store.state.phone);

        axios.post('/api/firday/address/address.php',params).then(res=>{
          this.arr=res.data;
          if(this.arr.length!=0){
            this.bol=true;
            this.bol1=false;
          }else{
            this.bol=false;
            this.bol1=true;
          }
        })
        if(this.$store.state.phone==''){
          this.show=false;
          this.show1=true;
        }else{
          this.show=true;
          this.show1=false;
        }

      },
      computed:{

      }
    }
</script>

<style scoped>
  .wrap{
    width: 1083px;
    height: 623px;
    border: 1px solid #e7e7e7;
  }
  .wrap h3{
    width: 1043px;
    height: 56px;
    line-height: 56px;
    padding:0 20px;
    border-bottom: 1px solid #e7e7e7;
  }
  .wrap h3 span{
    float: left;
    font-size: 18px;
    color: #212121;
  }
  .wrap h3 .btn{
    float: right;
    background: #498e3d;
    color: #fff;
    width: 90px;
    height: 30px;
    margin-top: 14px;
    border-radius: 5px;
    cursor: pointer;
  }
  ul{
    width: 1040px;
    margin-top: 20px;
    margin-left: 20px;
    border: 1px solid #e9e9e9;
  }
  li{
    width: 1040px;
    height: 46px;
    line-height: 46px;
    border-bottom: 1px solid #e9e9e9;
  }
  li:first-child{
    background: #f2f2f2;
    border-bottom:none;
  }
  li:last-child{
    border-bottom:none;
  }
  li span{
    display: inline-block;
    float: left;
    text-align: center;
    font-size: 14px;
  }
  li span:nth-child(1){
    width: 100px;
    height: 46px;
  }
  li span:nth-child(2){
    width: 190px;
    height: 46px;
  }
  li span:nth-child(3){
    width: 320px;
    height: 46px;
  }
  li span:nth-child(4){
    width: 100px;
    height: 46px;
  }
  li span:nth-child(5){
    width: 110px;
    height: 46px;
  }
  li span:nth-child(6){
    width: 220px;
    height: 46px;
  }
  li span:nth-child(4) button{
    background: #fff;
    color: #4b943d;
    cursor: pointer;
  }
  .btn1,.btn2,.btn3{
    background: none;
    color: #4b943d;
    cursor: pointer;
  }
  .btn1{
    background: #f08200;
    border-radius: 5px;
    color: #fff;
    padding: 5px;
  }

  .empty{
    margin: 240px auto;
    width: 350px;
    height: 40px;
  }
  .empty img{
    vertical-align: bottom;
    margin-right: 20px;
  }
  .empty span{
    font-size: 18px;
    color: #a0a0a0;
  }
  .empty .btn4{
    /*float: right;*/
    background: #498e3d;
    color: #fff;
    width: 90px;
    height: 30px;
    margin-top: 14px;
    border-radius: 5px;
    cursor: pointer;
  }


  .pp{
    width: 1083px;
    height: 46px;
    line-height: 46px;
    border-bottom: 1px solid #e9e9e9;
    text-align: center;
  }
</style>
